<script setup>
import { onMounted, ref } from 'vue'
import xxxSon from './components/xxxSon.vue'
// 设计如此
/*
ref:
   1:定义响应式数据  
     const xxx= ref(999)
   2：获取原生标签dom
      1:先定义一个空(undefined/null)的响应式数据
        const divDom=ref(undefined/null)
      2:原生标签上绑定ref  
        <div ref="divDom" ></div>
     3:获取dom
        divDom.value就是相应dom         
   3:获取组件实例对象
     1:先定义一个空(undefined/null)的响应式数据
       const xxxCom=ref()
     2:组件标签上绑定ref  
        <xxxSon ref="xxxCom" ></xxxSon>
     3:组件内暴露出相应的方法或者属性
        defineExpose({
           属性,
           方法  
        })
     4：访问使用
        xxxCom.value.方法()
*/
const appdom = ref(null) // {value:null}
onMounted(() => {
  console.log('appdom', appdom.value)
})
const getDom = () => {
  console.log('appdom', appdom.value)
}

// 获取组件实例
const xxxCom = ref()
const btnClick = () => {
  // console.log(xxxCom.value)
  xxxCom.value.fn()
}
</script>

<template>
  <div class="app-page" ref="appdom">app</div>
  <button @click="getDom">获取dom</button>
  <hr />
  <xxxSon ref="xxxCom"></xxxSon>
  <button @click="btnClick">调用组件内的方法</button>
</template>

<style scoped></style>
